import React, { useState } from 'react'

import { Button, Input } from 'antd-mobile'
import Right from '../../components/Message/right'
import Left from '../../components/Message/left'
function Message() {
  let [mess, setMess] = useState([])
  const [value, setValue] = useState('')
  const send=()=>{
    setMess((prev)=>[...prev,{message:value}])
    setValue('')
    console.log('连接已成功')
  }
  return (
    <div>
      <div style={{height:'500px'}}>
        <Left></Left>
        {mess.map((item, index) => {
         return <Right key={index} {...item} />
        })}
      </div>
      <div style={{display:'flex'}}>
        <Input
          style={{width:'310px'}}
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        <Button onClick={()=>send()}>发送</Button>
      </div>

    </div>
  )
}

export default Message
